<template>
	<div class="container">
		<Aside></Aside>
		<div class="main-box">
			<Header></Header>
			<div class="table-box">
				<el-button slot="trigger" size="medium" @click='handleExcel'>excel导入</el-button>
				<input type="file" ref="upload" @change='handleUploadChange($event)'
					accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
					v-show="false">
				<span style="margin-right: 10px;"></span>
				<el-button @click='addTable(EditForm)' size="medium">手动添加</el-button>
				<el-table :data="modelData" style="width: 100%">
					<el-table-column prop="name" label="项目名称">
					</el-table-column>
					<el-table-column  label="查询状态">
						<template slot-scope="scope">{{ scope.row.power_role | statusFormat }}</template>
					</el-table-column>
					<el-table-column  label="查询权限">
						<template slot-scope="scope">{{ scope.row.power_role | orderFormat }}</template>
					</el-table-column>
					<el-table-column label="排序">
						<template slot-scope='scope'>{{scope.row.index || 1}}</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="small" icon="el-icon-edit"
								@click="handleUpdate(modelData[scope.$index],scope.$index)">修改
							</el-button>
							<el-button type="danger" size="small" @click="handledelete(scope.$index)"
								icon="el-icon-delete">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog :title="digTitle" :visible.sync="IsUpdate">
					<el-form :data='EditForm' label-width="80px">
						<el-form-item label="项目名称">
							<el-input v-model="EditForm.name"></el-input>
						</el-form-item>
						<el-form-item label="查询">
							<el-radio-group v-model="EditForm.power_role">
								<el-radio-button :label="0">禁止查询</el-radio-button>
								<el-radio-button :label="1">超级管理员</el-radio-button>
								<el-radio-button :label="2">普通管理员</el-radio-button>
								<el-radio-button :label="3">会员用户</el-radio-button>
								<el-radio-button :label="4">普通用户</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="排序">
							<el-input  v-model="EditForm.index"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button v-show="digTitle == '添加项目'" @click='SaveSubmit(EditForm)' type="primary">添加
							</el-button>
							<el-button v-show="digTitle == '修改项目'" @click='EditSubmit' type="primary">保存修改
							</el-button>
							<el-button @click='IsUpdate=false'>取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import Aside from '../components/aside.vue'
	import Header from '../components/header.vue'
	export default {
		name: 'Index',
		data() {
			return {
				modelData: [],//所有表
				IsUpdate: false,
				EditForm: {
					id:'',
					name: '',
					power_role: 1,
					index:1
				},
				digTitle: '修改项目',
				listTable: []
			}
		},
		filters: {
			statusFormat(status) {
				return status === 0 ? '×' : '√'
			},
			orderFormat(status) {
				switch (status) {
					case 0:
						return '禁止查询'
					case 1:
						return '超级管理员'
					case 2:
						return '普通管理员'
					case 3:
						return '会员用户'
					default:
						return '普通用户'
				}
			},
		},
		methods: {
			addTable(table) { //手动添加
				this.digTitle = '添加项目';
				this.IsUpdate = true;
			},
			SaveSubmit(table) { //添加保存
				var that = this;
				that.$api.createTable(table.name, table.power_role,table.index)
					.then(res => {
						if (res.code == 0) {
							that.$message.success(res.message);
							that.IsUpdate = false;
							that.$api.getTable().then(function(res) {
								that.modelData = res.result.data
							})
						} else {
							that.$message.error(res.message);
						}
					});
			},
			handledelete(index) { //删除
				this.$confirm('此操作将永久删除该记录, 是否继续?', '删除确认', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					type: 'warning'
				}).then(() => {
					this.$api.deleteTable([this.modelData[index].id]).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.modelData.splice(index, 1);
					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleUpdate(data) { //修改
				this.digTitle = '修改项目'
				for (var k in this.EditForm) {
					this.EditForm[k] = data[k];
				}
				this.IsUpdate = true;
			},
			EditSubmit() { //保存修改
				var that = this;
				that.$api.updateTable(that.EditForm.id, that.EditForm.name, that.EditForm.power_role,that.EditForm.index).then(res => {
					if (res.code === 0) {
						that.$message.success(res.message);
						that.$api.getTable().then(res=>{
							this.modelData = res.result.data
						})
						that.IsUpdate = false;
					}
				})
			},
			handleExcel() {
				this.$refs['upload'].click();
			},
			async handleUploadChange(obj) {
				await this.importf(obj)
			},
			importf(obj) {
				let that = this;
				let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
				this.file = event.currentTarget.files[0];
				var rABS = false; //是否将文件读取为二进制字符串
				var f = this.file;
				var reader = new FileReader();
				FileReader.prototype.readAsBinaryString = function(f) {
					var binary = "";
					var rABS = false; //是否将文件读取为二进制字符串
					var pt = this;
					var wb; //读取完成的数据
					var outdata;
					var reader = new FileReader();
					reader.onload = function(e) {
						var bytes = new Uint8Array(reader.result);
						var length = bytes.byteLength;
						for (var i = 0; i < length; i++) {
							binary += String.fromCharCode(bytes[i]);
						}
						var XLSX = require("xlsx");
						if (rABS) {
							wb = XLSX.read(btoa(fixdata(binary)), {
								//手动转化
								type: "base64"
							});
						} else {
							wb = XLSX.read(binary, {
								type: "binary"
							});
						}
						// outdata就是你想要的东西 excel导入的数据
						outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
						// excel 数据再处理
						const tName = f.name; //表名
						let fields = [];
						for (let k in outdata[0]) {
							let obj = {
								name:k,
								index:1,
								is_search: 0,
								must_search:0,
								show_search: 1
							}
							fields.push(obj);
						}
						let arrData = [];//表数据
						outdata.map(item=>{
							var ds = [];
							for(let k in item){
								ds.push(item[k]);
							}
							arrData.push(ds);
						});
						that.$api.importTable(tName,fields,arrData).then(res=>{
							if(res.code === 0){
								that.$message.success(res.message);
								that.$api.getTable().then(res=>{
									that.modelData = res.result.data
								})
							}else{
								that.$message.error(res.message);
							}
						})
					};
					reader.readAsArrayBuffer(f);
				};
				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			},
		},
		components: {
			Aside,
			Header,
		},
		mounted() {
			this.$api.getTable().then(res=>{
				this.modelData = res.result.data
			})
		},
		watch:{
			IsUpdate(val){
				if(!val){
					this.EditForm.name = '';
					this.EditForm.index = 1;
					this.EditForm.power_role = 1;
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		width: 100%;
		max-width: 100%;
		min-height: 100vh;
	}

	.main-box {
		flex: 1;
		background-color: #e8eaed;
		padding: 30px;
	}

	.table-box {
		background-color: #fff;
		padding: 25px;
	}
	.el-table {
		width: 100%;
		margin-top: 20px;
	}
</style>
